<template>
  <div class="attack">
    <header>
      <p class="title">汽车行业重要资源测绘与安全分析平台</p>
    </header>
    <div class="timeDv">
      <p>2021年5月26日 星期五</p>
      <p />
      <p>上午 11时17分54秒</p>
    </div>
    <ul class="topContent">
      <li />
      <li />
      <li />
      <li />
    </ul>
    <article>
      <ul class="leftContent">
        <li />
        <li />
      </ul>
      <div class="rightContent">
        <div class="topDv">
          <div />
          <div />
        </div>
        <div class="bottomDv" />
      </div>
    </article>
  </div>
</template>

<script>
import './rem'
export default {
  name: 'AttackSituation'
}
</script>
<style>
    html,body{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
</style>
<style scoped lang="less">
    ul,li{
        padding:0;
        margin:0;
        list-style:none
    }
    p{
        padding: 0;
        margin: 0;
    }
.attack{
    background-image: url("../../../assets/img/background.png");
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
}
    .attack{
        display: grid;
        grid-template-rows: 0.77rem 0.3rem 1.08rem 1fr;
        >header{
            width: 100%;
            background-image: url("../../../assets/img/zh-title.png");
            background-repeat:no-repeat;
            background-size:100% 100%;
            .title{
                text-align: center;
                font-size: .36rem;
                padding-top: .19rem;
                color: #fff;
                font-family: Adobe Heiti Std;
            }
        }
        .timeDv{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: .33rem;
            p{
                text-align: center;
                font-size: 14px;
                color: #acacac;
            }
        }
        .topContent{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 1.08rem;
            li{
                background: url("../../../assets/img/to-li.png");
                background-repeat:no-repeat;
                background-size:100% 100%;
                text-align: center;
            }
        }
        >article{
            display: grid;
            grid-template-columns: 1fr 2fr;
            .leftContent{
                display: grid;
                padding: 0;
                margin: 0;
                grid-template-rows: 1fr 1fr;
                li{
                    background-image: url("../../../assets/img/wh.png");
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                }
            }
            .rightContent{
                display: grid;
                grid-template-rows: 1fr 1fr;
                .topDv{
                    display: grid;
                    grid-template-columns:1fr 1fr;
                    div{
                        background-image: url("../../../assets/img/wh.png");
                        background-repeat:no-repeat;
                        background-size:100% 100%;
                    }
                }
                .bottomDv{
                    display: grid;
                    grid-template-columns:2fr;
                    background-image: url("../../../assets/img/table.png");
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                }
            }
        }

    }

</style>
